<template>
  <div>
    <mt-header title="个人信息" fixed style="background-color: #ff4d4f;color:#fff;">
      <router-link to="/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <!-- <div @click="chooseType" class="head">
      <span>头像</span>
      <img :src="userIcon" alt />
    </div>-->
    <!-- <input @change="fileChange($event)" type="file" accept="image/*" id="upload_file" style="display: none" /> -->
    <div class="info">
      <mt-field label="姓名" v-model="name"></mt-field>
      <!-- <mt-field label="班级" v-model="Nickname"></mt-field> -->
      <mt-cell title="性别">
        <input class="mint-field-core" :value="Sex" @click="actionSheet" />
      </mt-cell>
      <mt-field label="联系电话" type="tel" v-model="Phone"></mt-field>
      <mt-field label="学号" v-model="Address"></mt-field>
      <mt-cell title="年级">
        <input class="mint-field-core" :value="nj" @click="btn" />
      </mt-cell>
      <mt-cell title="班级">
        <input class="mint-field-core" :value="room" @click="btn_room" />
      </mt-cell>
      <!-- <mt-field label="密码" type="password" v-model="Passward"></mt-field> -->
    </div>
    <mt-popup v-model="popupVisible" position="bottom" class="popup">
      <div class="btn">
        <span class="bnn_left" @click="qx">取消</span>
        <span class="btn_rig" @click="qd">确定</span>
      </div>
      <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
    </mt-popup>
    <mt-popup v-model="popupVisible1" position="bottom" class="popup">
      <div class="btn">
        <span class="bnn_left" @click="qx1">取消</span>
        <span class="btn_rig" @click="qd1">确定</span>
      </div>
      <mt-picker
        style="text-align: center;"
        :slots="lists"
        ref="lists"
        @change="onValuesChange1"
        value-key="ClassName"
      ></mt-picker>
    </mt-popup>
    <mt-actionsheet :actions="data" v-model="sheetVisible"></mt-actionsheet>
    <mt-button @click="saveInfo" class="btn1" type="primary">保存</mt-button>
  </div>
</template>

<script>
import https from "../../utils/http.js";
import CryptoJS from "crypto-js";
import lrz from "lrz";
import axios from "axios";
export default {
  props: {},
  data() {
    return {
      token: "00860019003100CE002000E100F200FF00BA00DB000300C5005A003800E100C5",
      name: "",
      userIcon: "",
      Address: "",
      nj: "年级",
      room: "班级",
      list: [],
      Sex: "",
      Phone: "",
      Nickname: "",
      popupVisible: false,
      popupVisible1: false,
      sheetVisible: false,
      Passward: "",
      classid: "",
      studentid: "",
      slots: [
        {
          flex: 1,
          values: ["高一", "高二", "高三"],
          className: "slot1",
          textAlign: "right"
        }
      ],
      slots1: [
        {
          flex: 1,
          values: [
            "2015-01",
            "2015-02",
            "2015-03",
            "2015-04",
            "2015-05",
            "2015-06"
          ],
          className: "slot1",
          textAlign: "right"
        }
      ],
      data: [
        {
          name: "男",
          method: this.sexNan // 调用methods中的函数
        },
        {
          name: "女",
          method: this.sexNv // 调用methods中的函数
        }
      ]
    };
  },
  computed: {
    lists() {
      let lists = [
        {
          flex: 1,
          values: this.list,
          className: "slot1",
          textAlign: "right"
        }
      ];
      return lists;
    }
  },
  created() {
    this.token = localStorage.getItem("token");
  },
  mounted() {
    this.get_list();
  },
  watch: {},
  methods: {
    get_room(id) {
      https({
        method: "GET",
        url: "/api/v1/Commons/ClassGetListByGrade/" + id
      })
        .then(res => {
          if (res.Code == 200) {
            this.list = res.Data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    btn() {
      this.popupVisible = true;
    },
    btn_room() {
      let id = 0;
      if (this.values == "高一") {
        this.popupVisible1 = true;
        id = 1;
        this.get_room(id);
      } else if (this.values == "高二") {
        id = 2;
        this.popupVisible1 = true;
        this.get_room(id);
      } else if (this.values == "高三") {
        id = 3;
        this.popupVisible1 = true;
        this.get_room(id);
      } else if (this.values == "请选择年级") {
        Toast("请先选择年级");
        this.popupVisible1 = false;
      }
    },
    onValuesChange(picker, values) {
      this.values = values[0];
    },
    onValuesChange1(picker, values) {
      if (values[0]) {
        this.values1 = values[0].ClassName;
        this.roomid = values[0].ClassID;
      }
    },
    qx() {
      this.popupVisible = false;
    },
    qd() {
      this.nj = this.values;
      this.popupVisible = false;
    },
    qx1() {
      this.popupVisible1 = false;
    },
    qd1() {
      this.room = this.values1;
      this.popupVisible1 = false;
    },
    get_list() {
      https({
        method: "GET",
        url: "/api/v1/Systems/GetDetail"
      })
        .then(res => {
          if (res.Code == 200) {
            // this.userIcon = res.ResultData.Icon;
            this.name = res.Data.Name;
            this.Address = res.Data.Idcard;
            if (res.Data.Sex == "1") {
              this.Sex = "男";
            } else if (res.Data.Sex == "0") {
              this.Sex = "女";
            } else {
              this.Sex = "未知";
            }
            this.classid = res.Data.ClassID;
            this.room = res.Data.ClassName;

            if (res.Data.Grade == "1") {
              this.nj = "高一";
            } else if (res.Data.Grade == "2") {
              this.nj = "高二";
            } else if (res.Data.Grade == "3") {
              this.nj = "高三";
            }
            this.get_room(res.Data.Grade);
            this.studentid = res.Data.StudentID;
            this.Phone = res.Data.Mobile;
            // this.Nickname = res.Data.Idcard;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    sexNan() {
      this.Sex = "男";
    },
    sexNv() {
      this.Sex = "女";
    },
    chooseType() {
      document.getElementById("upload_file").click();
    },
    fileChange(e) {
      let _this = this;
      _this.files = "";
      let files = e.target.files[0];
      _this.files = files;
      if (!e || !window.FileReader) return;
      let reader = new FileReader();
      lrz(files, { width: 800 })
        .then(rst => {
          _this.files = rst.file;
        })
        .catch(function(err) {
          console.log(err);
        })
        .always(function() {
          console.log(1);
        });
      Indicator.open({
        text: "Loading...",
        spinnerType: "fading-circle"
      });
      reader.readAsDataURL(files);
      reader.onloadend = function() {
        https({
          url: "/api/Images/Upload",
          method: "POST",
          data: {
            UseType: "2",
            FileName: _this.files.name,
            Base64String: encodeURIComponent(reader.result)
          }
        }).then(res => {
          if (res.ResultCode == 111111) {
            Indicator.close();
            Toast("上传成功");
            _this.userIcon =
              "https://wxapi.ouheshuju.com/api/Images/ShowMember/" +
              res.ResultValue;
          } else {
            Indicator.close();
            Toast("上传失败，请重试");
          }
        });
      };
    },
    actionSheet() {
      // 打开action sheet
      this.sheetVisible = true;
    },
    saveInfo() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle"
      });
      var sexType = "";
      if (this.Sex == "男") {
        sexType = "1";
      } else if (this.Sex == "女") {
        sexType = "2";
      } else {
        sexType = "0";
      }
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].ClassName == this.room) {
          this.classid = this.list[i].ClassID;
        }
      }
      var strCiphertext = "";
      var key = CryptoJS.enc.Utf8.parse("26567E43738a8F91)E4E34e8D6E1E28A");
      var iv = CryptoJS.enc.Utf8.parse("3d03AD3F-2Ac26A2");
      var encrypted = CryptoJS.AES.encrypt(this.Passward, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      strCiphertext = encrypted.ciphertext.toString(); //密文
      https({
        method: "post",
        url: "/api/v1/Systems/Update",
        data: {
          StudentID: this.studentid,
          ClassID: this.classid,
          Name: this.name,
          Sex: sexType,
          Mobile: this.Phone,
          Idcard: this.Address

          // LoginPWD: strCiphertext
        }
      })
        .then(res => {
          Indicator.close();
          if (res.Code == 200) {
            this.get_list();
            Toast(res.Describe);
          } else {
            Toast(res.Describe);
          }
        })
        .catch(err => {
          Indicator.close();
          console.log(err);
        });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.classroom {
  list-style: none;
  width: 100%;
  float: left;
  height: 2.5rem;
  line-height: 2.5rem;
  background: #fff;
  text-indent: 1.5em;
  box-sizing: border-box;
  color: #888;
  font-size: 0.8rem;
}
.head {
  width: 96%;
  height: 100px;
  line-height: 100px;
  padding-left: 2%;
  img {
    float: right;
    height: 80px;
    margin-top: 10px;
    border-radius: 50%;
  }
}
.btn1 {
  width: 80%;
  height: 80px;
  margin-left: 10%;
  margin-top: 60px;
  background: #ff4d4f;
}
.bor {
  border-bottom: 1px solid #eee;
}
.popup {
  width: 100%;
  background: #fff;
  .btn {
    width: 90%;
    height: 32px;
    line-height: 32px;
    padding-top: 1rem;
    margin: 0 auto;
    .btn_left {
      float: left;
    }
    .btn_rig {
      float: right;
    }
  }
}
</style>
<style>
.info {
  padding-top: 2.5rem;
  box-sizing: border-box;
}
.info .mint-cell-title {
  margin-left: 0;
}
.info .mint-field-core {
  text-align: right;
}
</style>
